<template>
  <div class="container">
    <van-tabs v-model="active" @change="change">
      <van-tab title="待付款">
        <div class="order" v-for="item in list" :key="item.id">
          <div class="top">
            <span>订单号：{{ item.orderNo }}</span>
            <van-tag :type="getType(item.status)">{{ getStatus(item.status) }}</van-tag>
          </div>
          <div class="box">
            <van-card v-for="i in item.itemList" :key="i.id" :num="i.quantity" :price="i.price" :title="i.dish.name" :thumb="'http://8.138.102.145/images/' + i.dish.img">
              <template #tags>
                <van-tag v-if="i.taste" plain type="danger">{{ i.taste.name }}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="footer">
            <p>
              <span>共件{{ item.totalQuantity }}商品</span>
              <span class="price">订单金额：￥{{ item.totalPrice }}</span>
            </p>
            <van-divider
              dashed
              :style="{
                color: '#1989fa',
                borderColor: '#cfcfcf',
                padding: '0 16px',
              }"
            />
            <van-button plain class="btn" type="primary" @click="pay(item)">支付订单</van-button>
            <van-button plain class="btn" type="warning" @click="cancel_order(item)">取消订单</van-button>
          </div>
        </div>
        <van-empty v-if="!list.length" image="search" description="没有订单" />
      </van-tab>
      <van-tab title="待出餐"
        ><div class="order" v-for="item in list" :key="item.id">
          <div class="top">
            <span>订单号：{{ item.orderNo }}</span>
            <van-tag :type="getType(item.status)">{{ getStatus(item.status) }}</van-tag>
          </div>
          <div class="box">
            <van-card v-for="i in item.itemList" :key="i.id" :num="i.quantity" :price="i.price" :title="i.dish.name" :thumb="'http://8.138.102.145/images/' + i.dish.img">
              <template #tags>
                <van-tag v-if="i.taste" plain type="danger">{{ i.taste.name }}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="footer">
            <p>
              <span>共件{{ item.totalQuantity }}商品</span>
              <span class="price">订单金额：￥{{ item.totalPrice }}</span>
            </p>
            <van-divider
              dashed
              :style="{
                color: '#1989fa',
                borderColor: '#cfcfcf',
                padding: '0 16px',
              }"
            />
            <van-button plain class="btn" type="info" @click="handle_notify(item)">提醒商家</van-button>
          </div>
        </div>
        <van-empty v-if="!list.length" image="search" description="没有订单" />
      </van-tab>
      <van-tab title="已出餐"
        ><div class="order" v-for="item in list" :key="item.id">
          <div class="top">
            <span>订单号：{{ item.orderNo }}</span>
            <van-tag :type="getType(item.status)">{{ getStatus(item.status) }}</van-tag>
          </div>
          <div class="box">
            <van-card v-for="i in item.itemList" :key="i.id" :num="i.quantity" :price="i.price" :title="i.dish.name" :thumb="'http://8.138.102.145/images/' + i.dish.img">
              <template #tags>
                <van-tag v-if="i.taste" plain type="danger">{{ i.taste.name }}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="footer">
            <p>
              <span>共件{{ item.totalQuantity }}商品</span>
              <span class="price">订单金额：￥{{ item.totalPrice }}</span>
            </p>
            <van-divider
              dashed
              :style="{
                color: '#1989fa',
                borderColor: '#cfcfcf',
                padding: '0 16px',
              }"
            />
          </div>
        </div>
        <van-empty v-if="!list.length" image="search" description="没有订单"
      /></van-tab>
      <van-tab title="已完成"
        ><div class="order" v-for="item in list" :key="item.id">
          <div class="top">
            <span>订单号：{{ item.orderNo }}</span>
            <van-tag :type="getType(item.status)">{{ getStatus(item.status) }}</van-tag>
          </div>
          <div class="box">
            <van-card v-for="i in item.itemList" :key="i.id" :num="i.quantity" :price="i.price" :title="i.dish.name" :thumb="'http://8.138.102.145/images/' + i.dish.img">
              <template #tags>
                <van-tag v-if="i.taste" plain type="danger">{{ i.taste.name }}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="footer">
            <p>
              <span>共件{{ item.totalQuantity }}商品</span>
              <span class="price">订单金额：￥{{ item.totalPrice }}</span>
            </p>
            <van-divider
              dashed
              :style="{
                color: '#1989fa',
                borderColor: '#cfcfcf',
                padding: '0 16px',
              }"
            />
            <van-button plain class="btn" type="danger" @click="del_order(item)">删除订单</van-button>
            <van-button plain class="btn" type="primary" @click="bug_again(item)">再次购买</van-button>
          </div>
        </div>
        <van-empty v-if="!list.length" image="search" description="没有订单"
      /></van-tab>
      <!-- <van-tab title="已过期"
        ><div class="order" v-for="item in list" :key="item.id">
          <div class="top">
            <span>订单号：{{ item.orderNo }}</span>
            <van-tag :type="getType(item.status)">{{
              getStatus(item.status)
            }}</van-tag>
          </div>
          <div class="box">
            <van-card
              v-for="i in item.itemList"
              :key="i.id"
              :num="i.quantity"
              :price="i.price"
              :title="i.dish.name"
              :thumb="'http://8.138.102.145:8232/images/' + i.dish.img"
            >
              <template #tags>
                <van-tag v-if="i.taste" plain type="danger">{{
                  i.taste.name
                }}</van-tag>
              </template>
            </van-card>
          </div>
          <div class="footer">
            <p>
              <span>共件{{ item.totalQuantity }}商品</span>
              <span class="price">订单金额：￥{{ item.totalPrice }}</span>
            </p>
            <van-divider
              dashed
              :style="{
                color: '#1989fa',
                borderColor: '#cfcfcf',
                padding: '0 16px',
              }"
            />
            <van-button plain class="btn" type="danger" @click="del_order(item)"
              >删除订单</van-button
            >
          </div>
        </div>
        <van-empty v-if="!list.length" image="search" description="没有订单"
      /></van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      list: [],
    };
  },
  mounted() {
    if (this.$route.query.status) {
      this.active = parseInt(this.$route.query.status);
    }
    this.get_list();
  },
  methods: {
    change() {
      this.get_list();
    },
    get_list() {
      this.req.get('/order', { params: { status: this.active } }).then((res) => {
        this.list = res.rows;
      });
    },
    getStatus(status) {
      return status === 0 ? '待付款' : status === 1 ? '待出餐' : status === 2 ? '已出餐' : status === 3 ? '已完成' : status === 4 ? '已过期' : '未知状态';
    },
    getType(status) {
      return status === 0 ? 'danger' : status === 1 ? 'warning' : status === 2 ? 'primary' : status === 3 ? 'success' : status === 4 ? 'warning' : 'primary';
    },
    pay({ orderNo }) {
      this.$router.push({
        path: '/paymethod',
        query: { orderNo, type: 'buy' },
      });
    },
    del_order(item) {
      this.req.delete(`/order?id=${item.id}`).then((res) => {
        if (res.status === 200) {
          this.$notify({
            type: 'success',
            message: '删除成功',
          });
          this.get_list();
        }
      });
    },
    cancel_order(item) {
      this.req.post('/order/cancel', { orderNo: item.orderNo }).then((res) => {
        this.get_list();
      });
    },
    handle_notify(item) {
      console.log(item);
      this.$notify({
        type: 'success',
        message: item.orderMsg,
      });
    },
    bug_again(item) {
      this.$router.push('/search');
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f8f8f8;
  overflow: scroll;

  padding-bottom: 50px;
}
.order {
  margin-bottom: 1rem;
  margin-top: 0.25rem;
  background-color: #fff;
  .top {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem;
    span {
      font-size: 0.75rem;
    }
  }
  .footer {
    text-align: right;
    p {
      display: flex;
      align-items: center;
      justify-content: right;
      font-size: 0.75rem;
      .price {
        font-size: 0.875rem;
      }
      span {
        margin-right: 1.25rem;
      }
    }
    .btn {
      margin-right: 0.625rem;
      margin-bottom: 0.625rem;
      height: 1.875rem;
      width: 5.625rem;
    }
  }
}
.van-card {
  background-color: #fff;
}
</style>
